<template>
  <div>
    <canvas :width="size*ratio" :height="size*ratio" :style=" {width:size+'px',height:size+ 'px'}"
            ref="canvas"></canvas>
  </div>
</template>
<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {
        ratio: 2,
        size: 25,
        context: ''
      }
    },
    components: {},
    props: {
      fontSize: {
        default: '25'
      },
      color: {default: 'black'},
      fontWeight: {
        type: Number,
        default: 500
      },
    },
    methods: {
      createdCanvas () {
        var canvas = this.$refs.canvas
        if (!canvas.getContext) {
          return
        }
        var context = canvas.getContext('2d')
        var devicePixelRatio = window.devicePixelRatio || 1
        var backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1
        var ratio = devicePixelRatio / backingStoreRatio
        console.log(ratio)
        this.ratio = ratio
        this.context = context
        setTimeout(() => {
          this.drawCanvasBag()
        })
      },
      drawCanvasBag () {
        var size = this.size
        var context = this.context
        var scale = this.size / 30
        var calR = 5 * scale
        var top = 2 * scale
        var calCenterY = calR
        context.beginPath()
        context.scale(this.ratio, this.ratio)
        context.clearRect(0, 0, size, size)
        context.translate(size * 0.5, top)
        context.save()
        // 提手圆弧部分
        context.arc(0, calR, calR, 0, Math.PI, true)
        // 提手直线部分
        var liney = 3 * scale //直线部分长度
        context.moveTo(-calR, calR)
        context.lineTo(-calR, calR + liney)
        context.moveTo(calR, calR + liney)
        context.lineTo(calR, calR)

        //袋子
        context.moveTo(-calR - 3 * scale, liney + calR)
        context.lineTo(calR + 3 * scale, liney + calR)
        context.moveTo(-calR - 3 * scale, liney + calR)
        context.lineTo(-calR - 5 * scale, 25 * scale)
        context.lineTo(calR + 5 * scale, 25 * scale)
        context.lineTo(calR + 3 * scale, liney + calR)
        context.lineTo(0, liney + calR + 5 * scale)
        context.closePath()
        context.strokeStyle = this.color
        context.lineWidth = this.fontWeight / 400
        context.lineJoin = 'round'
        context.lineCap = 'butt'
        context.stroke()
        context.restore()
      },


    },
    created () {
      if ((/rem*$/i).test(this.fontSize)) {
        var fontSize = parseFloat(this.fontSize) || 0
        var html = document.querySelector('html')
        var htmlFontSize = document.defaultView.getComputedStyle(html, null)['font-size'];
        this.size = fontSize * parseFloat(htmlFontSize)
      } else {
        this.size = parseFloat(this.fontSize)
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.createdCanvas()
      })
    },
    watch: {}
  }
</script>

<style>

</style>
